<!-- 心电图 -->
<template>
	<view class="pageview">
		<!-- <Lt-ECG :ecgArr="ecgArr" :pageNum="0"></Lt-ECG> -->
		<view class="card">
			<view class="charts-box">
				<qiun-data-charts type="line" :opts="opts" :chartData="chartData" canvas2d />
			</view>
		</view>
		<view class="card" style="min-height: 300upx; text-align: center;padding: 30upx">
			心电报告
		</view>
	</view>
</template>

<script>
	function group(array, subGroupLength) {
		let index = 0;
		let newArray = [];
		while (index < array.length) {
			newArray.push(array.slice(index, index += subGroupLength));
		}
		return newArray;
	}
	let categories = [];
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				ecgArr: [],
				chartData: {
					categories: [],
					series: [{
						name: '心电图',
						data: []
					}]
				},
				opts: {
					rotate: false,
					rotateLock: false,
					color: ['#fd0e13'],
					padding: [10, 5, 0, 0],
					legend: {
						show: false
					},
					dataLabel: false,
					dataPointShape: false,
					animation: false,
					update: true, // 关键：是否开启连续更新数据的方法,开启之后就不会抖动了
					duration: 0,
					xAxis: {
						disabled: false, //不显示x轴
						disableGrid: false,
						boundaryGap: 'justify',
						type: 'grid',
						gridColor: '#36b743',
						// gridType: 'dash',
						// dashLength: 0.5,
						labelCount: 26,
						gridEval: 100,
						data: [{
							min: 0,
							max: 2500
						}],
						// splitNumber: 31,
						fontSize: 5,
						rotateLabel: true,
						marginTop: 5,
						axisLine: false,
						format: 'timexAxisformat'
					},
					yAxis: {
						disabled: false, //不显示y轴
						// disableGrid: false,
						gridType: 'solid',
						dashLength: 0.5,
						gridColor: '#36b743',
						gridEval: 0.1,
						splitNumber: 20,
						data: [{
							axisLine: false,
							min: -1,
							max: 1,
							tofix: 1,
							fontSize: 12,
							fontColor: '#050006'
						}]
					},
					extra: {
						tooltip: {
							showBox: false,
							splitLine: false
						},
						line: {
							activeType: "none",
							width: 1
						}
					}
				},
			}
		},
		computed: {
			...mapState(['curAccount'])
		},
		created() {
			this.findEcgFirstPage(this.curAccount.detailId);

		},
		methods: {
			findEcgFirstPage(detailId) {
				this.$postAction(this.$deviceapi.findEcgFirstPage + '?detailId=' + detailId).then(da => {
					let data = [];
					if (da && da.length > 0) {
						for (let i = 0; i < da.length; i++) {
							let list = da[i].data;
							if (list && list.length > 0) {
								list.forEach((item, index) => {
									let ecg = item > 1 ? 1 : item < -1 ? -1 : item;
									data.push(ecg);

								});
							}
						}
					}
					data = data.slice(0, data.length > 2500 ? 2500 : data.length)
					categories = [];
					data.forEach((item, index) => {
						categories.push(index)
					})

					this.chartData = JSON.parse(
						JSON.stringify({
							categories,
							series: [{
								name: '心电图',
								data: data
							}]
						})
					);
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.card {
		margin: 20upx;
	}

	.charts-box {
		width: 100%;
		height: 610upx;
		padding-bottom: 10upx;
	}
</style>